import React, { useEffect, useState } from 'react'

import { useProList, useTitle } from './22-hooks'

/*
    自定义 hooks 中，可以有参数，也可以无参数。可以有返回值也可以无返回值
    自定义 hooks 一定要使用 use 开头，在自定义的时候 hooks 可以嵌套使用

    React 中 hooks 只能在两个地方使用
    一个是函数组件的最外层使用
    一个是自定义 hooks 内部使用
*/
function useBanner() {
    const [banner, setbanner] = useState([])
    useEffect(() => {
        fetch('http://121.89.205.189:3000/api/banner/list').then(res => res.json())
            .then(res => {
                // console.log(res.data);
                setbanner(res.data)
            })
    }, [])

    return banner
}

export default function App() {

    const banner = useBanner()

    const pro = useProList(150)

    useTitle('今天好像是周五')

    return (
        <div>
            {banner && banner.map(item => <img key={item.bannerid} src={item.img} alt="" />)}

            <ol>
                {pro && pro.map(item => <li key={item.proid}>{item.proname}</li>)}
            </ol>
        </div>
    )
}
